<template>
  <div class="data-log-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">
        <i class="header-icon">📊</i>
        数据日志查询
      </h1>
      <p class="page-description">操作日志查询、统计分析和趋势监控</p>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon">📋</div>
        <div class="stat-content">
          <h3>{{ moduleStats.dataCollection || 0 }}</h3>
          <p>数据采集入库</p>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">⚠️</div>
        <div class="stat-content">
          <h3>{{ moduleStats.exceptionManagement || 0 }}</h3>
          <p>异常管理</p>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">🔍</div>
        <div class="stat-content">
          <h3>{{ moduleStats.dataQuery || 0 }}</h3>
          <p>数据查询</p>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">📈</div>
        <div class="stat-content">
          <h3>{{ moduleStats.storageStatistics || 0 }}</h3>
          <p>入库统计</p>
        </div>
      </div>
    </div>

    <!-- 功能选项卡 -->
    <div class="tab-container">
      <div class="tab-nav">
        <button
            v-for="tab in tabs"
            :key="tab.key"
            :class="['tab-btn', { active: activeTab === tab.key }]"
            @click="switchTab(tab.key)"
        >
          <i :class="tab.icon"></i>
          {{ tab.label }}
        </button>
      </div>
    </div>

    <!-- 日志列表 -->
    <div v-if="activeTab === 'list'" class="tab-content">
      <div class="list-card">
        <div class="card-header">
          <h3>操作日志列表</h3>
          <div class="header-actions">
            <button @click="exportLogs" class="btn btn-success" :disabled="exporting">
              <i v-if="exporting" class="loading-icon">⏳</i>
              <i v-else>📤</i>
              导出日志
            </button>
            <button @click="refreshLogList" class="btn btn-secondary">
              <i class="refresh-icon">🔄</i>
              刷新
            </button>
          </div>
        </div>

        <!-- 筛选条件 -->
        <div class="filter-bar">
          <div class="filter-group">
            <label>业务模块：</label>
            <select v-model="filters.bizModule" @change="loadLogList">
              <option value="">全部模块</option>
              <option value="1">数据采集入库</option>
              <option value="2">数据异常管理</option>
              <option value="3">数据应用查询</option>
              <option value="4">特征词校验</option>
              <option value="5">入库统计</option>
              <option value="6">数据采集日志汇总</option>
            </select>
          </div>
          <div class="filter-group">
            <label>操作类型：</label>
            <select v-model="filters.bizType" @change="loadLogList">
              <option value="">全部类型</option>
              <option value="1">采集</option>
              <option value="2">入库</option>
              <option value="3">异常标记</option>
              <option value="4">异常修复</option>
              <option value="5">数据查询</option>
              <option value="6">特征词校验</option>
              <option value="7">统计计算</option>
              <option value="8">日志查询</option>
            </select>
          </div>
          <div class="filter-group">
            <label>操作人：</label>
            <input
                type="text"
                v-model="filters.operator"
                placeholder="输入操作人"
                @keyup.enter="loadLogList"
            >
          </div>
          <div class="filter-group">
            <label>开始时间：</label>
            <input
                type="datetime-local"
                v-model="filters.startTime"
                @change="loadLogList"
            >
          </div>
          <div class="filter-group">
            <label>结束时间：</label>
            <input
                type="datetime-local"
                v-model="filters.endTime"
                @change="loadLogList"
            >
          </div>
        </div>

        <!-- 数据表格 -->
        <div class="data-table">
          <table>
            <thead>
            <tr>
              <th>日志ID</th>
              <th>业务模块</th>
              <th>操作类型</th>
              <th>操作描述</th>
              <th>关联ID</th>
              <th>操作人</th>
              <th>操作时间</th>
              <th>操作结果</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in logList" :key="item.log.id">
              <td>{{ item.log.id }}</td>
              <td>
                  <span :class="['module-tag', getModuleClass(item.log.bizModule)]">
                    {{ getModuleText(item.log.bizModule) }}
                  </span>
              </td>
              <td>
                  <span :class="['type-tag', getTypeClass(item.log.bizType)]">
                    {{ getTypeText(item.log.bizType) }}
                  </span>
              </td>
              <td class="description">{{ item.log.operationDesc }}</td>
              <td>{{ item.log.relationId }}</td>
              <td>
                <div v-if="item.operatorInfo" class="operator-info">
                  <div class="operator-name">{{ item.operatorInfo.realName }}</div>
                  <div class="operator-id">ID: {{ item.operatorInfo.id }}</div>
                </div>
                <span v-else class="system-operator">{{ item.log.operator }}</span>
              </td>
              <td>{{ formatDateTime(item.log.operateTime) }}</td>
              <td>
                <div class="result-info">
                    <span :class="['result-status', getResultClass(item.log.responseResult)]">
                      {{ getResultStatus(item.log.responseResult) }}
                    </span>
                </div>
              </td>
              <td>
                <button
                    @click="viewLogDetail(item.log.id)"
                    class="btn btn-sm btn-info"
                >
                  详情
                </button>
              </td>
            </tr>
            <tr v-if="logList.length === 0">
              <td colspan="9" class="no-data">暂无日志数据</td>
            </tr>
            </tbody>
          </table>
        </div>

        <!-- 分页 -->
        <div class="pagination">
          <button
              @click="changePage(currentPage - 1)"
              :disabled="currentPage <= 1"
              class="btn btn-secondary"
          >
            上一页
          </button>

          <div class="page-info">
            第 {{ currentPage }} 页，共 {{ totalPages }} 页 (总计 {{ totalRecords }} 条记录)
          </div>

          <div class="page-jump">
            跳转到第
            <input
                type="number"
                v-model="jumpPage"
                min="1"
                :max="totalPages"
                @keyup.enter="jumpToPage(jumpPage)"
            >
            页
            <button
                @click="jumpToPage(jumpPage)"
                class="btn btn-secondary btn-sm"
            >
              跳转
            </button>
          </div>

          <div class="page-size-selector">
            每页显示
            <select v-model="pageSize" @change="changePageSize">
              <option value="20">20 条</option>
              <option value="50">50 条</option>
              <option value="100">100 条</option>
              <option value="10">10 条</option>
            </select>
          </div>

          <button
              @click="changePage(currentPage + 1)"
              :disabled="currentPage >= totalPages || (logList.length < pageSize && !hasMorePages)"
              class="btn btn-secondary"
          >
            下一页
          </button>
        </div>
      </div>
    </div>

    <!-- 统计分析 -->
    <div v-if="activeTab === 'statistics'" class="tab-content">
      <div class="stats-card">
        <div class="card-header">
          <h3>统计分析</h3>
        </div>

        <div class="stats-section">
          <h4>操作类型统计</h4>
          <div class="type-stats-grid">
            <div class="type-stat-item" v-for="(value, key) in typeStats" :key="key">
              <div class="type-stat-label">{{ getTypeStatLabel(key) }}</div>
              <div class="type-stat-value">{{ value }}</div>
            </div>
          </div>
        </div>

        <div class="stats-section">
          <h4>操作人员统计</h4>
          <div class="operator-stats">
            <div class="operator-stat-item" v-for="item in operatorStats" :key="item.operator">
              <div class="operator-info">
                <div class="operator-name">{{ item.operatorName || item.operator }}</div>
                <div class="operator-count">操作次数: {{ item.count }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 趋势分析 -->
    <div v-if="activeTab === 'trend'" class="tab-content">
      <div class="trend-card">
        <div class="card-header">
          <h3>日志趋势分析</h3>
          <div class="trend-controls">
            <div class="control-group">
              <label>开始时间：</label>
              <input type="date" v-model="trendFilters.startTime">
            </div>
            <div class="control-group">
              <label>结束时间：</label>
              <input type="date" v-model="trendFilters.endTime">
            </div>
            <div class="control-group">
              <label>时间粒度：</label>
              <select v-model="trendFilters.granularity">
                <option value="day">按天</option>
                <option value="week">按周</option>
                <option value="month">按月</option>
              </select>
            </div>
            <button @click="loadTrendData" class="btn btn-primary">
              查询趋势
            </button>
          </div>
        </div>

        <div class="trend-chart" v-if="trendData.length > 0">
          <div class="chart-placeholder">
            <div class="chart-info">
              <h4>日志趋势图</h4>
              <p>共 {{ trendData.length }} 个数据点</p>
            </div>
            <div class="trend-list">
              <div v-for="item in trendData" :key="item.date" class="trend-item">
                <span class="trend-date">{{ item.date }}</span>
                <span class="trend-count">{{ item.count }} 条</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 日志详情弹窗 -->
    <div v-if="showDetailModal" class="modal-overlay" @click="closeDetailModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>日志详情</h3>
          <button @click="closeDetailModal" class="close-btn">✕</button>
        </div>
        <div class="modal-body" v-if="logDetail">
          <div class="detail-section">
            <h4>基本信息</h4>
            <div class="detail-grid">
              <div class="detail-item">
                <label>日志ID：</label>
                <span>{{ logDetail.log.id }}</span>
              </div>
              <div class="detail-item">
                <label>业务模块：</label>
                <span :class="['module-tag', getModuleClass(logDetail.log.bizModule)]">
                  {{ getModuleText(logDetail.log.bizModule) }}
                </span>
              </div>
              <div class="detail-item">
                <label>操作类型：</label>
                <span :class="['type-tag', getTypeClass(logDetail.log.bizType)]">
                  {{ getTypeText(logDetail.log.bizType) }}
                </span>
              </div>
              <div class="detail-item">
                <label>关联ID：</label>
                <span>{{ logDetail.log.relationId }}</span>
              </div>
              <div class="detail-item">
                <label>操作时间：</label>
                <span>{{ formatDateTime(logDetail.log.operateTime) }}</span>
              </div>
              <div class="detail-item">
                <label>操作人：</label>
                <div v-if="logDetail.operatorInfo">
                  <div>{{ logDetail.operatorInfo.realName }}</div>
                  <div class="operator-detail">ID: {{ logDetail.operatorInfo.id }}</div>
                </div>
                <span v-else>{{ logDetail.log.operator }}</span>
              </div>
            </div>

            <div class="detail-item full-width">
              <label>操作描述：</label>
              <p class="description-text">{{ logDetail.log.operationDesc }}</p>
            </div>

            <div class="detail-item full-width" v-if="logDetail.log.requestParams">
              <label>请求参数：</label>
              <pre class="code-block">{{ logDetail.log.requestParams }}</pre>
            </div>

            <div class="detail-item full-width">
              <label>操作结果：</label>
              <p class="result-text" :class="getResultClass(logDetail.log.responseResult)">
                {{ logDetail.log.responseResult }}
              </p>
            </div>

            <div class="detail-item full-width" v-if="logDetail.log.extInfo">
              <label>扩展信息：</label>
              <pre class="code-block">{{ logDetail.log.extInfo }}</pre>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="closeDetailModal" class="btn btn-secondary">关闭</button>
        </div>
      </div>
    </div>

    <!-- 消息提示 -->
    <div v-if="message.show" :class="['message-toast', message.type]">
      <i :class="getMessageIcon(message.type)"></i>
      {{ message.text }}
    </div>
  </div>
</template>

<script>
import { dataLogApi } from '@/assets/api/dataCollection.js'

export default {
  name: 'DataLogQuery',
  data() {
    return {
      activeTab: 'list',
      tabs: [
        { key: 'list', label: '日志列表', icon: '📋' },
        { key: 'statistics', label: '统计分析', icon: '📊' },
        { key: 'trend', label: '趋势分析', icon: '📈' }
      ],

      // 筛选条件
      filters: {
        bizModule: '',
        bizType: '',
        operator: '',
        startTime: '',
        endTime: ''
      },

      // 趋势分析筛选
      trendFilters: {
        startTime: '',
        endTime: '',
        granularity: 'day'
      },

      // 数据
      logList: [],
      moduleStats: {},
      typeStats: {},
      operatorStats: [],
      trendData: [],
      logDetail: null,

      // 状态控制
      exporting: false,
      showDetailModal: false,

      // 分页
      currentPage: 1,
      pageSize: 20,
      totalRecords: 0,
      totalPages: 0,
      jumpPage: 1,
      hasMorePages: true,

      // 消息提示
      message: {
        show: false,
        type: 'success',
        text: ''
      }
    }
  },

  mounted() {
    this.initDateFilters()
    this.loadStatistics()
    this.loadLogList()
  },

  methods: {
    // 初始化日期筛选
    initDateFilters() {
      const now = new Date()
      const today = now.toISOString().split('T')[0]
      const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]

      this.trendFilters.startTime = weekAgo
      this.trendFilters.endTime = today
    },

    // 切换选项卡
    switchTab(tab) {
      this.activeTab = tab
      if (tab === 'list') {
        this.loadLogList()
      } else if (tab === 'statistics') {
        this.loadStatistics()
      } else if (tab === 'trend') {
        this.loadTrendData()
      }
    },

    // 加载统计数据
    async loadStatistics() {
      try {
        const [moduleRes, typeRes, operatorRes] = await Promise.all([
          dataLogApi.getModuleStatistics(),
          dataLogApi.getTypeStatistics(),
          dataLogApi.getOperatorStatistics()
        ])

        if (moduleRes && moduleRes.data && moduleRes.data.code === 200) {
          this.moduleStats = moduleRes.data.data || {}
        }
        if (typeRes && typeRes.data && typeRes.data.code === 200) {
          this.typeStats = typeRes.data.data || {}
        }
        if (operatorRes && operatorRes.data && operatorRes.data.code === 200) {
          this.operatorStats = operatorRes.data.data || []
        }
      } catch (error) {
        console.error('加载统计数据失败:', error)
        this.moduleStats = {}
        this.typeStats = {}
        this.operatorStats = []
      }
    },

    // 加载日志列表
    async loadLogList() {
      try {
        const params = {
          page: this.currentPage,
          size: this.pageSize,
          ...this.filters
        }

        const response = await dataLogApi.getLogList(params)
        console.log('日志数据响应:', response)

        if (response && response.data && response.data.code === 200) {
          // 数据在response.data.data中
          if (Array.isArray(response.data.data)) {
            this.logList = response.data.data
            // 如果返回数据少于pageSize，说明是最后一页
            this.hasMorePages = this.logList.length >= this.pageSize
            this.totalRecords = response.data.total || this.logList.length
            this.totalPages = Math.ceil(this.totalRecords / this.pageSize)
          } else if (response.data.data && Array.isArray(response.data.data.records)) {
            this.logList = response.data.data.records
            this.hasMorePages = response.data.data.records.length >= this.pageSize
            this.totalRecords = response.data.data.total || 0
            this.totalPages = response.data.data.pages || Math.ceil(this.totalRecords / this.pageSize)
          } else {
            this.logList = []
            this.hasMorePages = false
            this.totalRecords = 0
            this.totalPages = 0
          }
          console.log('日志数据加载成功，数量:', this.logList.length, '总记录数:', this.totalRecords)
        } else {
          this.logList = []
          this.hasMorePages = false
          this.totalRecords = 0
          this.totalPages = 0
          this.showMessage('warning', response?.data?.message || '日志数据加载失败')
        }
      } catch (error) {
        console.error('加载日志数据失败:', error)
        this.logList = []
        this.hasMorePages = false
        this.totalRecords = 0
        this.totalPages = 0
        this.showMessage('error', '加载日志数据失败')
      }
    },

    // 加载趋势数据
    async loadTrendData() {
      if (!this.trendFilters.startTime || !this.trendFilters.endTime) {
        this.showMessage('warning', '请选择时间范围')
        return
      }

      try {
        const response = await dataLogApi.getLogTrend(this.trendFilters)
        console.log('趋势数据响应:', response)

        if (response && response.data && response.data.code === 200) {
          this.trendData = response.data.data || []
        } else {
          this.trendData = []
          this.showMessage('warning', response?.data?.message || '趋势数据加载失败')
        }
      } catch (error) {
        console.error('加载趋势数据失败:', error)
        this.trendData = []
        this.showMessage('error', '加载趋势数据失败')
      }
    },

    // 刷新日志列表
    refreshLogList() {
      this.currentPage = 1
      this.loadLogList()
      this.loadStatistics()
    },

    // 查看日志详情
    async viewLogDetail(id) {
      try {
        const response = await dataLogApi.getLogDetail(id)
        console.log('日志详情响应:', response)

        if (response && response.data && response.data.code === 200) {
          this.logDetail = response.data.data
          this.showDetailModal = true
        } else {
          this.showMessage('error', response?.data?.message || '获取日志详情失败')
        }
      } catch (error) {
        console.error('获取日志详情失败:', error)
        this.showMessage('error', '系统异常，请稍后重试')
      }
    },

    // 关闭详情弹窗
    closeDetailModal() {
      this.showDetailModal = false
      this.logDetail = null
    },

    // 导出日志
    async exportLogs() {
      this.exporting = true
      try {
        // 准备导出参数，确保数值类型正确
        const exportParams = {
          currentUserId: 1 // 临时设置
        }

        // 添加筛选条件，确保类型转换
        if (this.filters.bizModule && this.filters.bizModule !== '') {
          exportParams.bizModule = parseInt(this.filters.bizModule)
        }
        if (this.filters.bizType && this.filters.bizType !== '') {
          exportParams.bizType = parseInt(this.filters.bizType)
        }
        if (this.filters.operator && this.filters.operator !== '') {
          exportParams.operator = this.filters.operator
        }
        if (this.filters.startTime && this.filters.startTime !== '') {
          exportParams.startTime = this.filters.startTime
        }
        if (this.filters.endTime && this.filters.endTime !== '') {
          exportParams.endTime = this.filters.endTime
        }

        console.log('导出参数:', exportParams)

        const response = await dataLogApi.exportLogs(exportParams)

        if (response && response.data && response.data.code === 200) {
          this.showMessage('success', response.data.message || '日志导出成功')

          // 处理文件下载
          if (response.data.data && Array.isArray(response.data.data)) {
            this.downloadLogFile(response.data.data)
          }
        } else {
          this.showMessage('error', response?.data?.message || '日志导出失败')
        }
      } catch (error) {
        console.error('日志导出失败:', error)
        this.showMessage('error', '系统异常，请稍后重试')
      } finally {
        this.exporting = false
      }
    },

    // 下载日志文件
    downloadLogFile(logData) {
      try {
        // 将日志数据转换为CSV格式
        const csvContent = this.convertToCSV(logData)

        // 创建Blob对象
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })

        // 创建下载链接
        const link = document.createElement('a')
        const url = URL.createObjectURL(blob)
        link.setAttribute('href', url)
        link.setAttribute('download', `日志数据_${new Date().toISOString().slice(0, 10)}.csv`)
        link.style.visibility = 'hidden'

        // 触发下载
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)

        this.showMessage('success', '日志文件下载成功')
      } catch (error) {
        console.error('文件下载失败:', error)
        this.showMessage('error', '文件下载失败')
      }
    },

    // 转换为CSV格式
    convertToCSV(logData) {
      const headers = ['日志ID', '业务模块', '操作类型', '关联ID', '操作时间', '操作人', '操作描述', '请求参数', '操作结果']
      const csvRows = []

      // 添加表头
      csvRows.push(headers.join(','))

      // 添加数据行
      logData.forEach(item => {
        const log = item.log || item
        const row = [
          log.id || '',
          this.getModuleText(log.bizModule),
          this.getTypeText(log.bizType),
          log.relationId || '',
          this.formatDateTime(log.operateTime),
          log.operator || '',
          (log.operationDesc || '').replace(/,/g, '，'), // 替换逗号避免CSV格式问题
          (log.requestParams || '').replace(/,/g, '，'),
          (log.responseResult || '').replace(/,/g, '，')
        ]
        csvRows.push(row.join(','))
      })

      return csvRows.join('\n')
    },

    // 分页切换
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page
        this.loadLogList()
      }
    },

    // 跳转到指定页
    jumpToPage(page) {
      const pageNum = parseInt(page)
      if (pageNum >= 1 && pageNum <= this.totalPages) {
        this.changePage(pageNum)
      }
    },

    // 改变每页显示数量
    changePageSize(size) {
      this.pageSize = size
      this.currentPage = 1
      this.loadLogList()
    },

    // 工具方法
    getModuleText(module) {
      const modules = {
        1: '数据采集入库',
        2: '数据异常管理',
        3: '数据应用查询',
        4: '特征词校验',
        5: '入库统计',
        6: '数据采集日志汇总'
      }
      return modules[module] || '未知'
    },

    getModuleClass(module) {
      const classes = {
        1: 'collection',
        2: 'exception',
        3: 'query',
        4: 'validation',
        5: 'statistics',
        6: 'summary'
      }
      return classes[module] || ''
    },

    getTypeText(type) {
      const types = {
        1: '采集',
        2: '入库',
        3: '异常标记',
        4: '异常修复',
        5: '数据查询',
        6: '特征词校验',
        7: '统计计算',
        8: '日志查询'
      }
      return types[type] || '未知'
    },

    getTypeClass(type) {
      const classes = {
        1: 'collect',
        2: 'storage',
        3: 'mark',
        4: 'fix',
        5: 'query',
        6: 'validate',
        7: 'calculate',
        8: 'log'
      }
      return classes[type] || ''
    },

    getTypeStatLabel(key) {
      const labels = {
        collection: '采集操作',
        storage: '入库操作',
        exceptionMark: '异常标记',
        exceptionFix: '异常修复',
        dataQuery: '数据查询',
        keywordValidation: '特征词校验',
        statisticsCalc: '统计计算',
        logQuery: '日志查询'
      }
      return labels[key] || key
    },

    getResultStatus(result) {
      if (!result) return '未知'
      if (result.includes('成功') || result.includes('Success')) return '成功'
      if (result.includes('失败') || result.includes('Error')) return '失败'
      return '其他'
    },

    getResultClass(result) {
      const status = this.getResultStatus(result)
      return {
        '成功': 'success',
        '失败': 'error',
        '其他': 'info'
      }[status] || 'info'
    },

    // 格式化日期时间
    formatDateTime(dateTime) {
      if (!dateTime) return ''

      try {
        // 处理不同的日期格式
        let date
        if (typeof dateTime === 'string') {
          // 如果是字符串，尝试解析
          date = new Date(dateTime.replace(/-/g, '/'))
        } else if (dateTime instanceof Date) {
          date = dateTime
        } else {
          // 如果是时间戳
          date = new Date(dateTime)
        }

        // 检查日期是否有效
        if (isNaN(date.getTime())) {
          return dateTime.toString() // 返回原始值
        }

        // 格式化为 YYYY-MM-DD HH:mm:ss
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
      } catch (error) {
        console.error('日期格式化失败:', error, dateTime)
        return dateTime ? dateTime.toString() : ''
      }
    },

    getMessageIcon(type) {
      const icons = {
        success: '✅',
        error: '❌',
        warning: '⚠️',
        info: 'ℹ️'
      }
      return icons[type] || 'ℹ️'
    },

    showMessage(type, text) {
      this.message = { show: true, type, text }
      setTimeout(() => {
        this.message.show = false
      }, 3000)
    }
  }
}
</script>

<style scoped>
.data-log-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-bottom: 30px;
  color: white;
}

.page-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.header-icon {
  font-size: 2.5rem;
}

.page-description {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0;
}

/* 统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 15px;
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  font-size: 3rem;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  color: white;
}

.stat-content h3 {
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0 0 5px 0;
  color: #333;
}

.stat-content p {
  font-size: 1rem;
  color: #666;
  margin: 0;
}

/* 选项卡 */
.tab-container {
  margin-bottom: 30px;
}

.tab-nav {
  display: flex;
  background: white;
  border-radius: 15px;
  padding: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  gap: 10px;
}

.tab-btn {
  flex: 1;
  padding: 15px 20px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #666;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tab-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
}

.tab-btn.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

/* 内容卡片 */
.tab-content {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.list-card, .stats-card, .trend-card {
  background: white;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  padding: 25px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
}

.card-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.5rem;
}

.header-actions {
  display: flex;
  gap: 10px;
}

/* 筛选条件 */
.filter-bar {
  padding: 25px;
  border-bottom: 1px solid #eee;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  background: #f8f9fa;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.filter-group label {
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
}

.filter-group select,
.filter-group input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: border-color 0.3s ease;
}

.filter-group select:focus,
.filter-group input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* 数据表格 */
.data-table {
  overflow-x: auto;
}

.data-table table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 15px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 0.9rem;
}

.data-table td {
  padding: 15px 12px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

.data-table tr:hover {
  background: rgba(102, 126, 234, 0.05);
}

.no-data {
  text-align: center;
  color: #999;
  font-style: italic;
  padding: 40px;
}

/* 标签样式 */
.module-tag, .type-tag {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
  color: white;
}

.module-tag.collection { background: #28a745; }
.module-tag.exception { background: #dc3545; }
.module-tag.query { background: #007bff; }
.module-tag.validation { background: #ffc107; color: #333; }
.module-tag.statistics { background: #17a2b8; }
.module-tag.summary { background: #6f42c1; }

.type-tag.collect { background: #20c997; }
.type-tag.storage { background: #fd7e14; }
.type-tag.mark { background: #e83e8c; }
.type-tag.fix { background: #6610f2; }
.type-tag.query { background: #0dcaf0; }
.type-tag.validate { background: #198754; }
.type-tag.calculate { background: #495057; }
.type-tag.log { background: #6c757d; }

/* 操作人信息 */
.operator-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.operator-name {
  font-weight: 600;
  color: #333;
}

.operator-id {
  font-size: 0.8rem;
  color: #666;
}

.system-operator {
  color: #999;
  font-style: italic;
}

/* 结果状态 */
.result-status {
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 500;
}

.result-status.success {
  background: #d4edda;
  color: #155724;
}

.result-status.error {
  background: #f8d7da;
  color: #721c24;
}

.result-status.info {
  background: #d1ecf1;
  color: #0c5460;
}

/* 描述文本 */
.description {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 分页 */
.pagination {
  padding: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  background: #f8f9fa;
}

.page-info {
  color: #666;
  font-weight: 500;
}

/* 按钮样式 */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-success {
  background: #28a745;
  color: white;
}

.btn-info {
  background: #17a2b8;
  color: white;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
}

/* 统计分析 */
.stats-section {
  padding: 25px;
  border-bottom: 1px solid #eee;
}

.stats-section:last-child {
  border-bottom: none;
}

.stats-section h4 {
  margin: 0 0 20px 0;
  color: #333;
}

.type-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.type-stat-item {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.type-stat-label {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 8px;
}

.type-stat-value {
  font-size: 2rem;
  font-weight: bold;
  color: #667eea;
}

.operator-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.operator-stat-item {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  border-left: 4px solid #667eea;
}

.operator-count {
  color: #666;
  font-size: 0.9rem;
  margin-top: 5px;
}

/* 趋势分析 */
.trend-controls {
  display: flex;
  gap: 15px;
  align-items: end;
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.control-group label {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}

.control-group input,
.control-group select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
}

.chart-placeholder {
  padding: 40px;
  text-align: center;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
}

.chart-info h4 {
  margin: 0 0 10px 0;
  color: #333;
}

.chart-info p {
  margin: 0 0 30px 0;
  color: #666;
}

.trend-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  max-height: 300px;
  overflow-y: auto;
}

.trend-item {
  background: white;
  padding: 15px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.trend-date {
  font-weight: 500;
  color: #333;
}

.trend-count {
  color: #667eea;
  font-weight: bold;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background: white;
  border-radius: 15px;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  padding: 25px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
}

.modal-header h3 {
  margin: 0;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #999;
  padding: 5px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: #f8f9fa;
  color: #333;
}

.modal-body {
  padding: 25px;
  max-height: 60vh;
  overflow-y: auto;
}

.detail-section h4 {
  margin: 0 0 20px 0;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 2px solid #667eea;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item.full-width {
  grid-column: 1 / -1;
}

.detail-item label {
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
}

.detail-item span,
.detail-item p {
  color: #666;
  margin: 0;
}

.operator-detail {
  font-size: 0.8rem;
  color: #999;
}

.description-text {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #667eea;
  line-height: 1.6;
}

.code-block {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  overflow-x: auto;
  border: 1px solid #e9ecef;
}

.result-text {
  padding: 15px;
  border-radius: 8px;
  font-weight: 500;
}

.result-text.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.result-text.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.result-text.info {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

.modal-footer {
  padding: 20px 25px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  background: #f8f9fa;
}

/* 消息提示 */
.message-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 20px;
  border-radius: 10px;
  color: white;
  font-weight: 500;
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideInRight 0.3s ease;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.message-toast.success {
  background: linear-gradient(135deg, #28a745, #20c997);
}

.message-toast.error {
  background: linear-gradient(135deg, #dc3545, #e83e8c);
}

.message-toast.warning {
  background: linear-gradient(135deg, #ffc107, #fd7e14);
}

.message-toast.info {
  background: linear-gradient(135deg, #17a2b8, #007bff);
}

/* 图标动画 */
.loading-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.refresh-icon {
  transition: transform 0.3s ease;
}

.btn:hover .refresh-icon {
  transform: rotate(180deg);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .data-log-container {
    padding: 15px;
  }

  .page-title {
    font-size: 2rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .tab-nav {
    flex-direction: column;
  }

  .filter-bar {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .trend-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .header-actions {
    flex-direction: column;
    gap: 8px;
  }

  .modal-content {
    width: 95%;
    margin: 10px;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 1.5rem;
    flex-direction: column;
    gap: 10px;
  }

  .header-icon {
    font-size: 2rem;
  }

  .stat-card {
    flex-direction: column;
    text-align: center;
  }

  .data-table {
    font-size: 0.8rem;
  }

  .data-table th,
  .data-table td {
    padding: 10px 8px;
  }
}
</style>
